<template>
	<view class="content" v-if="currentData">
		<view class="book-detail">
			<view class="top-part flex-center-col">
				<view class="title flex-center-col">
					<view>TEAM WANG design</view>
					<view>UNDER THE CASTLE」限定集市</view>
					<view class="offline" v-if="isOffline">线下登记</view>
				</view>
				<!-- 生成二维码 -->
				<canvas class="rcode" v-if="!qrCodeUrl && currentData.status == bookState.NOUSE" canvas-id="myCanvas"
					style="width: 200px;height: 200px;margin-top: 20px;"></canvas>
				<image class="rcode" v-if="qrCodeUrl && currentData.status == bookState.NOUSE" :src="qrCodeUrl"
					style="width: 200px;height: 200px;margin-top: 20px;" />
				<view class="text" v-if="currentData.status !== bookState.NOUSE">{{ getStateText(currentData.status) }}
				</view>
				<view class="tip" style="margin-top: 20px;">{{ getTipContent(currentData.status) }}
				</view>
			</view>
			<view class="info flex-center-col">
				<view>{{ currentData.username }}{{ currentData.gender }}</view>
				<view class="flex-center-col" v-if="!isOffline" style="margin: 23px auto;">
					<view>{{ currentData.date }}</view>
					<view>{{ currentData.time }}</view>
				</view>
				<view class="flex-center-col" v-if="isOffline" style="margin: 23px auto;">
					<view>{{ formateTime('day', currentData.created_time) }}</view>
					<view>{{ formateTime('time', currentData.created_time) }}</view>
				</view>
				<view>{{ currentData.address }}</view>
			</view>
			<view class="btn-group flex-center" :style="{ margin: `${isOffline ? '37px 0 20px 0' : '64px 0 20px 0'}` }">
				<view @click="toActive" style="margin: 15px;">活动详情</view>
				<view class="line" v-if="!isOffline && currentData.status == bookState.NOUSE"></view>
				<view v-if="!isOffline && currentData.status == bookState.NOUSE" style="margin: 15px;"
					@click="() => { isShowPop = true; }">取消预约</view>
			</view>
			<view class="book-select" v-if="isShowBtn && !isOffline">
				<view style="height: 82px">
					<button class="black-btn" @click="next">前往我的预约</button>
				</view>
			</view>
			<view class="book-select" v-if="isOffline && currentData.status !== '1'">
				<view style="height: 82px">
					<button class="black-btn" @click="ok">确认</button>
				</view>
			</view>
		</view>
		<confirm :show="isShowPop" confirmBtn="确认" cancelBtn="取消" @confirm="cancelBook"
			@change="(r) => { isShowPop = r }">
			<template v-slot:content>
				<view>取消后需重新预约</view>
			</template>
		</confirm>
	</view>
</template>

<script>
import confirm from '../../components/confrim/confrim.vue'
import icon from '../../components/icon/icon.vue'
import drawQrcode from '../../utils/qrcode';
import { formateTime } from '../../utils/formateTime.js';
import { bookState } from '../../utils/stateEnum';
import {
	mapState,
	mapActions
} from 'vuex';
export default {
	components: {
		confirm,
		icon
	},
	data() {
		return {
			currentData: null,
			isShowBtn: false,
			isShowPop: false,
			qrCodeUrl: '',
			isOffline: false,//是否查看线下列表数据详情
			bookState,
		}
	},
	computed: {
		...mapState({
			bookList: state => state.book.bookList, // 确保这里引用正确
			offlineList: state => state.book.offlineList, // 确保这里引用正确
			registerType: state => state.user.registerType
		}),
	},
	onLoad(options) {
		console.log('bookDetail', options, this.registerType,);
		if (options?.type == 'new') this.isShowBtn = true;
		if (this.registerType == 'offline' || options?.type == 'offline') {
			this.isOffline = true;
			this.getOfflineList().then(() => {
				if (options?.bookId) this.currentData = this.offlineList.filter(item => item.id == +options.bookId)?.[0];
				if (this.currentData?.status !== '1') {
					this.generateQRCode();
				}
			})
		} else {
			this.isOffline = false;
			this.getBookList().then(() => {
				if (options?.bookId) this.currentData = this.bookList.filter(item => item.id == +options.bookId)?.[0];
				if (this.currentData?.status !== '1') {
					this.generateQRCode();
				}
			});
		}
	},
	onShow() {
		uni.hideHomeButton({
			success: () => {
				console.log('hideHomeButton-success');
			}, fail: () => {
				console.log('hideHomeButton-fail');
			}, complete: () => {
				console.log('hideHomeButton-complete');
			}
		})
	},
	methods: {
		...mapActions(['getBookList', 'getOfflineList']),
		formateTime,//注册导入方法
		generateQRCode() {
			let key = `${this.isOffline ? 'book-offline,' : 'book-online,'}` + this.currentData.id;
			let that = this;
			drawQrcode({
				width: 200,
				height: 200,
				canvasId: 'myCanvas',
				text: key,
				callback: (res) => {
					console.log('绘制成功', res);
					uni.canvasToTempFilePath({
						canvasId: 'myCanvas',
						success: (res) => {
							console.log('导出图片成功', res.tempFilePath);
							that.qrCodeUrl = res.tempFilePath;
						},
						fail: (err) => {
							console.error('导出图片失败:', err);
						}
					}, this);
				}
			})
		},
		next() {
			uni.navigateTo({
				url: '/packageA/bookList/bookList'
			});
		},
		ok() {
			uni.navigateTo({
				url: '/packageA/offlineList/offlineList'
			});
		},
		toActive() {
			uni.navigateTo({
				url: '/packageA/bookRule/bookRule?type=' + 'detail'
			});
		},
		cancelBook() {
			this.isShowPop = false;
			this.$http.cancelBook({ id: this.currentData.id }).then(() => {
				wx.showToast({
					title: '取消成功',
					icon: 'success',
					duration: 2000
				})
				uni.navigateBack({
					delta: 1
				});
			}).catch(() => {
				wx.showToast({
					title: '取消失败',
					icon: 'fail',
					duration: 2000
				})
			})
		},
		getStateText(status) {
			switch (status) {
				case bookState.NOUSE:
					return '待使用'
				case bookState.VERIFIED:
					return '已被核销'
				case bookState.EXPIRED:
					return '已过期预约'
				case bookState.CANCELLED:
					return '已取消预约'
			}
		},
		getTipContent(status) {
			switch (status) {
				case bookState.NOUSE:
					return '预约成功，请出示二维码参加活动';
				case bookState.VERIFIED:
					return '该二维码已经被核销，如有问题请联系现场工作人员';
				case bookState.EXPIRED:
					return '该预约已过期';
				case bookState.CANCELLED:
					return '该预约已被取消';
			}
		}
	}
}
</script>

<style lang="scss" scoped>
.book-detail {
	width: 100%;
	max-height: 100%;
	overflow-y: auto;
	position: relative;
	z-index: 1;
}

.top-part {
	width: auto;
	padding: 0 18px 20px 18px;
	margin-bottom: 20px;
	position: relative;

	.title {
		font-size: 16px;
		font-weight: 600;
		margin-top: 20px;
	}

	.rcode {
		width: 128px;
	}

	.tip {
		font-size: 12px;
		letter-spacing: 0.8px;
		color: $tip2-color;
	}

	.offline {
		font-size: 24px;
		font-weight: bold;
		margin-top: 30px;
	}

	.strike {
		color: $gray-color !important;
		text-decoration: line-through;
	}

	.text {
		font-size: 16px;
		font-weight: bold;
		margin-top: 30px;
	}

	&::after {
		content: '';
		width: calc(100% - 42px);
		height: 1px;
		background-color: $tip-color;
		position: absolute;
		bottom: 0px;
		left: 50%;
		transform: translateX(-50%);
		opacity: 0.5;
	}
}

.info {
	>view {
		letter-spacing: 1px;
		font-size: 16px;
		font-weight: 600;
	}
}

.btn-group {
	width: 100%;
	font-size: 14px;
	color: $tip-color;
	position: relative;

	.line {
		width: 0.5px;
		height: 12px;
		background-color: $tip-color;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}
}

.navbar {
	width: 100%;
	height: 90px;
	background-color: #F8F8F8;
	position: relative;

	.back-icon {
		position: absolute;
		bottom: 10px;
		left: 6px;
	}

	>view {
		font-size: 12px;
		margin-top: 46px;
	}
}
</style>
